<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 guomw.Inc. All rights reserved.
  ~ 项目名称： mysite
  ~ 文件名称： list.html
  ~ Date：18-10-15 下午3:33
  ~ Author: guomw
  -->

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}">Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="shortcut icon" href="../../resource/favicon.ico"/>
    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"/>
    <link href="../../resource/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"/>
    <link href="../../resource/css/animate.min.css" rel="stylesheet"/>
    <link href="../../resource/css/style.min.css?v=4.0.0" rel="stylesheet"/>
    <link href="../../resource/css/plugins/sweetalert/sweetalert.css?v=4.0.0" rel="stylesheet"/>
    <link href="../../resource/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../../resource/css/style-diy.css?v=4.0.0" rel="stylesheet"/>

    <!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
</head>
<body class="gray-bg">

<div class="wrapper wrapper-content  animated fadeInRight">
    <div id="box">
        <canvas id="myChart"></canvas>
    </div>


</div>

<script src="../../resource/js/jquery.min.js?v=2.1.4"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5"></script>
<script src="../../resource/js/content.min.js?v=1.0.0"></script>
<script src="../../resource/js/plugins/iCheck/icheck.min.js"></script>
<script src="../../resource/js/plugins/nestable/jquery.nestable.js"></script>
<script src="../../resource/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="../../resource/js/plugins/hot/Jquery.util.js"></script>

<script src="../../resource/js/Chart.js"></script>
<script>

    $(function () {


        var n_color = "rgba(68, 114, 196, 1)";
        var b_color = "rgba(255, 0, 0, 1)";

        var ctx = document.getElementById("myChart").getContext('2d');
        var data = [];
        data.push(-1.6051143290260947);
        data.push(-2.03383083052699);
        data.push(-2.859563620799644);
        data.push(2.859563621799644);
        data.push(-0.859563621799644);
        data.push(3.859563621799644);
        data.push(3.859563621799644);
        data.push(3.859563621799644);
        data.push(-0.859563621799644);
        data.push(3.859563621799644);
        data.push(3.859563621799644);
        data.push(3.859563621799644);

        var labels = [];
        labels.push("hsa-miR-340-5p");
        labels.push("hsa-miR-340-5p");
        labels.push("hsa-miR-340-5p");
        labels.push("hsa-miR-340-5p");
        labels.push("hsa-miR-340-5p");
        labels.push("hsa-miR-340-5p");
        labels.push("hsa-miR-340-5p");
        labels.push("hsa-miR-340-5p");
        labels.push("hsa-miR-340-5p");
        labels.push("hsa-miR-340-5p");
        labels.push("hsa-miR-340-5p");
        labels.push("hsa-miR-340-5p");

        var width = data.length * 80 + 60;
        if (width > 640) width = 640;
        $("#box").css("width", width);
        $("#box").css("height", width * 0.6);

        var backgroundColor = [];
        for (var i = 0; i < data.length; i++) {
            if (data[i] >= -1 && data[i] <= 1) {
                backgroundColor.push(n_color);
            } else {
                backgroundColor.push(b_color);
            }
        }

        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: '目标物表达的差异倍数',
                    fillColor: "rgba(0,0,0,0)",
                    data: data,
                    backgroundColor: backgroundColor,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            },
            responsive: false,
            maintainAspectRatio: false
        });
    })


</script>

</body>
</html>
